<template>
  <div class="trash-note-list" :style="{'padding-bottom':isTrashCheck ? '58px' : '10px'}">
    <div class="trash-tip">废纸篓内的便签逾期30天后会被自动删除哦！</div>
    <ul class="note-list" :class="layout">
      <div v-show="layout == 'list' && trashNotes && trashNotes.length > 0" class="list-header">2018年</div>
      <li v-for="note in trashNotes" :key="note.id" @mousedown="gtouchstart(note)" @mouseup="gtouchend(note)"
        @touchstart="loopstart(note)" @touchend="clearLoop" :class="{active:note.done}">
        <p>{{note.content.length > 80 ? note.content.substr(0,77)+'...':note.content}}</p>
        <h4>{{note.date}}</h4>
        <mu-slide-right-transition>
          <mu-checkbox v-show="isTrashCheck" color="#ff9900" v-model="note.done" class="checkbox" />
        </mu-slide-right-transition>
      </li>
    </ul>
    <mu-dialog :open="dialog" title="恢复便签" @close="close">
      不能打开本便签，如需对便签进行编辑操作，请先恢复该便签
      <mu-button slot="actions" @click="close" primary flat>取消</mu-button>
      <mu-button slot="actions" primary @click="ecoveryConfirm" flat>恢复</mu-button>
    </mu-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      timeOutEvent: 0,
      Loop: null,
      dialog: false,
      note: {}
    };
  },
  computed: {
    ...mapGetters(["layout", "isTrashCheck"]),
    trashNotes() {
      return this.$store.state.trashNotes;
    }
  },
  methods: {
    //鼠标按下，模拟长按事件
    gtouchstart(note) {
      var _this = this;
      this.timeOutEvent = setTimeout(function() {
        _this.longPress(note);
      }, 500); //这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
      return false;
    },
    //鼠标放开，模拟长按事件
    gtouchend(note) {
      clearTimeout(this.timeOutEvent); //清除定时器
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容（尤如onclick事件）
        this.checkNote(note);
      }
      return false;
    },
    longPress(note) {
      this.timeOutEvent = 0;
      this.$store.state.isTrashCheck = true;
      this.$store.dispatch("toggleTrashNote", note);
    },
    //手按住开始，模拟长按事件
    loopstart(note) {
      var _this = this;
      clearInterval(this.Loop);
      this.Loop = setTimeout(function() {
        _this.$store.state.isTrashCheck = true;
        _this.$store.dispatch("toggleTrashNote", note);
      }, 500);
    },
    //手放开结束，模拟长按事件
    clearLoop() {
      clearTimeout(this.Loop);
    },
    //选中或者恢复
    checkNote(note) {
      if (this.$store.state.isTrashCheck) {
        this.$store.dispatch("toggleTrashNote", note);
      } else {
        this.dialog = true;
        this.$store.state.deleteTrashNotes.push(note);
      }
    },
    //取消恢复
    close() {
      this.dialog = false;
    },
    //恢复便签
    ecoveryConfirm() {
      this.dialog = false;
      this.$store.dispatch("recoveryNote");
    }
  }
};
</script>
<style scoped>
.trash-note-list {
  padding-top: 40px;
  padding-bottom: 58px;
}
.trash-note-list .trash-tip {
  padding: 0.6rem 1.5rem;
  color: #ffca00;
  background: #fdf9cf;
  border-top: 1px solid #ffde60;
  border-bottom: 1px solid #ffde60;
}
.note-list {
  padding: 12px;
}

.note-list .list-header {
  height: 30px;
  color: #ffc000;
  line-height: 30px;
  background: #fff;
  border-bottom: 1px solid #eee;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 2px 15px;
}
.note-list li {
  position: relative;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.note-list li h4 {
  margin: 0;
  font-weight: normal;
  color: #797979;
}
.note-list.list li {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.note-list li.active {
  background: #f5f5f5;
}
.note-list.list li:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.note-list.list li p {
  margin: 0;
  line-height: 1.7;
  word-break: break-word;
  height: auto;
  color: #181818;
}

.note-list.list li .checkbox {
  position: absolute;
  right: 25px;
  bottom: 21.5px;
}

.note-list.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.note-list.grid li.active {
  background: #f3f3f3;
}
.note-list.grid li {
  width: 48.7%;
  margin-bottom: 10px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
  display: inline-block;
}
.note-list.grid li .checkbox {
  position: absolute;
  right: 15px;
  bottom: 12px;
}

.note-list.grid li p {
  padding: 0;
  margin: 0;
  word-break: break-word;
  height: auto;
  margin-bottom: 25px;
}
.note-list.grid li h4 {
  border: none;
  padding: 0;
  color: #797979;
  position: absolute;
  bottom: 15px;
  left: 14px;
}
</style>


